import type { VueTypeCom } from '@/types/common.ts'
import type { Component } from 'vue'
import { EditorType, MaterialComType } from '@/constants'

export type StringStatusArr = String[]

export type ValueStatusArr = Array<{ value: string; status: string }>

export type PicTitleDescStatus = {
  picTitle: string
  picDesc: string
  value: string
}

export type PicTitleDescStatusArr = Array<PicTitleDescStatus>
export interface BaseProps {
  id: string
  isShow: boolean
  isUse?: boolean
  name: string
  editCom: VueTypeCom
}

export interface TextProps extends BaseProps {
  status: string
}

export interface OptionProps extends BaseProps {
  status: StringStatusArr | ValueStatusArr | PicTitleDescStatusArr
  currentStatus: number
}

// 公共的设置项，每个组件都有的设置项
export interface BaseStatus {
  // 文本类型
  textType: OptionProps
  title: TextProps
  desc: TextProps
  position: OptionProps
  titleSize: OptionProps
  descSize: OptionProps
  titleWeight: OptionProps
  descWeight: OptionProps
  titleItalic: OptionProps
  descItalic: OptionProps
  titleColor: TextProps
  descColor: TextProps
}

// 因为不是所有业务组件都有 options 这个设置项，所以需要分开定义
export interface OptionsStatus extends BaseStatus {
  options: OptionProps
}

export interface TypeStatus extends BaseStatus {
  type: OptionProps
}

export interface EditorComps {
  id: string
  type: Component
  name: MaterialComType
  status: {
    [key in string]: OptionProps | TextProps | BaseProps
  }
}

export const isStringStatusArr = (
  status: StringStatusArr | ValueStatusArr | PicTitleDescStatusArr,
): status is StringStatusArr => {
  return Array.isArray(status) && status.every((item) => typeof item === 'string')
}

export const isPicTitleDescStatusArr = (
  status: StringStatusArr | ValueStatusArr | PicTitleDescStatusArr,
): status is PicTitleDescStatusArr => {
  return (
    Array.isArray(status) &&
    status.every((item) => {
      return isPicTitleDescStatus(item)
    })
  )
}

// 是否对象是PicTitleDescStatus类型
export const isPicTitleDescStatus: (statue: any) => boolean = (statue: any) => {
  const keys = Object.keys(statue)
  return (
    typeof statue === 'object' &&
    statue !== null &&
    keys.includes('value') &&
    keys.includes('picTitle') &&
    keys.includes('picDesc')
  )
}

export const isValueStatusArr = (status: StringStatusArr | ValueStatusArr | PicTitleDescStatusArr)=>{
  return status.every((item) => {
    return typeof item === 'object' && item !== null && item.hasOwnProperty('value') && item.hasOwnProperty('status')
  })
}
